<template>
  <div>
    <v-header :seller="seller"></v-header>  <!--将数据绑定到 seller-->
    <div class="tab border-1px">
      <div class="tab-item">
        <a v-link="{path:'/goods'}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>

    <router-view  :seller="seller"></router-view>
  </div>
</template>

<!--js代码-->
<script type="text/ecmascript-6">
  //引入头部组件
  import header from 'components/header/header.vue';

  const ERR_OK = 0;

  export default{
    data(){
      return {
        seller: {}
      }
    },
    created(){
      //第一个参数是请求成功的回调函数    在组件实例化好的时候去请求商家数据
      this.$http.get('/api/seller').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = response.data;
        }
      });
    },
    components: {   //注册子组件
      'v-header': header
    }
  };

</script>

<!--样式-->
<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl";
  /*书写规范 先写宽高 在写样式*/
  #app
    .tab
      display: flex
      width: 100%
      height: 40px
      border-1px(rgba(7, 17, 27, 0.1))
      .tab-item
        flex: 1
        line-height: 40px
        font-size: 14px
        text-align: center
        & > a                              /*&表示父元素*/
          display: block
          font-size: 14px
          color: rgb(77, 85, 93)
          &.active
            color: rgb(240, 20, 20)
</style>
